<template>
  <div>
    <!-- 内容 -->
    <nav-top class="nav_example" :nav_list="nav_list" @change="changeNav"></nav-top>
    <div :class="show ? 'exa-content exa-content-active' : 'exa-content' " v-for="(item,key) in exa_list.data" :ref="'content'+key" :key="key">
      <div class="exa-body">
        <!-- logo -->
        <img :src="item.logo" class="exa-logo" />
        <!-- 内容 -->
        <div class="exa-body-content">
          <div class="exa-name">{{item.name}}</div>
          <div class="exa-memo">{{item.memo}}</div>
          <div class="exa-img-name">手机效果图</div>
          <div class="exa-img-body">
            <img v-for="(items,key) in item.imgs" :key="key" :src="items" alt class="exa-img" />
            <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/example/qrcode.png" alt class="exa-qrcode" />
          </div>
        </div>
      </div>
      <div class="exa-body-mobile" @click="toDetail(item)">
        <img v-lazy="item.cover" class="exa-cover-mobile" alt />
        <div class="exa-name-mobile">
          <span class="exa-title-mobile">{{item.name}}</span>
          <span class="exa-line-mobile">|</span>
          <span class="exa-badge-mobile">{{item.tag}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script scoped>
import navTop from '../../components/nav/nav-one.vue'
import webPage from '../../components/page/pc-style.vue'

export default {
  components: { navTop, webPage },
  data() {
    return {
      nav_list: [
        { name: '全部', state: 0 },
        { name: '网站建设', state: 1 },
        { name: 'APP', state: 2 },
        { name: '小程序', state: 3 },
        { name: '公众号', state: 4 }
      ],
      badge: ['全部', '网站建设', 'APP', '小程序', '公众号'],
      exa_list: {
        current_page: 1,
        data: [{ show: false }, { show: false }, { show: false }, { show: false }]
      },
      scroll_top: 0,
      state: 0,
      show: false
    }
  },
  mounted() {
    this.getData()
    this.getwidth()
  },
  methods: {
    getwidth() {
      // 获取屏幕宽度
      window.screenWidth = document.body.clientWidth
      // console.log(window.screenWidth);
      if (window.screenWidth < 1200) {
        this.show = false
      }
      console.log(this.show)
    },
    toDetail(data) {
      // console.log(data);
      this.$router.push({
        path: 'detail/' + data.id
      })
    },
    //获取页面数据
    getData() {
      this.show = false
      this.ajaxs('index/getExample', {
        data: { state: this.state },
        success: res => {
          this.show = true
          this.exa_list.data = res.msg
          this.$forceUpdate()
        }
      })
    },
    //改变导航栏
    changeNav(e) {
      this.exa_list.data = []
      this.state = e.state
      this.exa_list.current_page = 1
      this.getData()
      //console.log(e)
    }
  }
}
</script>

<style scoped>
@import url('../../assets/css/example/index.css');
</style>